<template>
  <div class="player_bar">
    <div class="bar_l">
      <div class="img_wrap" @click="toplaydetail">
        <img :src="$store.state.song_info.picUrl" alt />
      </div>
    </div>
    <div class="bar_m">
      <div class="song_name">{{song_info.song_name}}</div>
      <div class="singer">{{song_info.ars | formatSinger_global}}</div>
    </div>
    <div class="bar_r">
      <i class="iconfont icon-shangyishou" @click.stop="$emit('prev')"></i>
      <i @click="play" v-if="!$store.state.play_state" class="iconfont icon-bofang_huaban"></i>
      <i @click="pauseSong" v-else class="iconfont icon-zanting"></i>
      <i class="iconfont icon-xiayishou" @click.stop="$emit('next')"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
		props:{
			
		},
		computed:{
			...mapState(["playState", "song_info"]),
		},
		methods:{
			pauseSong() {
				this.audio.pause();
			},
			toplaydetail() {
				// this.$router.push({
				// 	name:'Play_detail',
				// })
				this.$root.$children[0].show_play_detail = true;
			},
			play(){
				this.audio.play();
			}
		}
};
</script>

<style lang="scss" scoped>
.player_bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  border-top-left-radius: 15px;
  background-image: linear-gradient(45deg, #d43c33, lightgray);
  display: flex;
  .bar_l {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    .img_wrap {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
  }
  .bar_m {
    width: 45%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.song_name{
		font-size: 18px;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.singer{
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 13px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
  }
  .bar_r {
    width: 45%;
    display: flex;
    align-items: center;
	justify-content: center;
    i {
      font-size: 35px;
    }
  }
}
</style>